<template>
<!-- 左边区域 -->
	<div class="news_area">
		<button class="green_btn"><i class="fa fa-pencil-square-o" aria-hidden="true" style="color:white"></i>&nbsp;发布主题</button>
		<div style="height: 13px;width: 100%"></div>
		<div class="gonggao">
			<p class="title">{{ gonggao.title }}</p>
			<div class="tbody">
				<ul>
					<li v-for="(item,index) in gonggao.body">&nbsp;&nbsp;&nbsp;&nbsp;<a :href="item.url">{{ item.context }}</a></li>
				</ul>
			</div>
		</div>
		<div style="height: 4px;width: 100%"></div>
		<div class="gonggao">
			<p class="title">{{ func.title }}</p>
			<div class="tbody">
				<ul>
					<li v-for="(item,index) in func.body">&nbsp;&nbsp;&nbsp;&nbsp;<a :href="item.url">{{ item.context }}</a></li>
				</ul>
			</div>
			<div style="height: 5px;width: 100%"></div>
		</div>
		<div style="height: 4px;width: 100%"></div>
		<div class="billboard">
			<p class="title">&nbsp;&nbsp;&nbsp;排行榜</p>
			<div class="tbody" :class="{bold_line:item.isline}" v-for="(item,index) in billboard">
				<div class="des">
					&nbsp;&nbsp;{{ item.title}}
				</div>
				<div class="pic" v-for="(child,key) in item.tbody">
					<div class="img">
					<img :src="child.img" alt="">
						<a :href="child.url">{{ child.summary }}</a>
					</div>
				</div>
				<div style="clear: left;"></div>
			</div>
			<div style="height: 5px;width: 100%"></div>
		</div>
	</div>
	<!-- end -->
</template>
<script>
export default {
	name:'notice',
  	data() {
      return {
    	billboard:[
    		{	
    			isline:false,
    			title:'有赞学堂讲师',
    			tbody:[
    				{
    					img:require('../../assets/person1.jpg'),
    					url:'./person/1.html',
    					summary:'小王'
    				},
    				{
    					img:require('../../assets/person2.jpg'),
    					url:'./person/2.html',
    					summary:'小李'
    				},
    				{
    					img:require('../../assets/person3.jpg'),
    					url:'./person/3.html',
    					summary:'小张'
    				},
    				{
    					img:require('../../assets/person4.jpg'),
    					url:'./person/3.html',
    					summary:'小陈'
    				}
    			]
    		},
    		{
    			isline:false,
    			title:'热心志愿者',
    			tbody:[
    				{
    					img:require('../../assets/volunteer1.jpg'),
    					url:'./volunteer/1.html',
    					summary:'小费'
    				},
    				{
    					img:require('../../assets/volunteer2.jpg'),
    					url:'./volunteer/2.html',
    					summary:'小柒'
    				}
    			]
    		},
    		{
    			isline:true,
    			title:'店铺服务找有赞代理商',
    			tbody:[
    				{
    					img:require('../../assets/company1.jpg'),
    					url:'./company/1.html',
    					summary:'公司1'
    				},
    				{
    					img:require('../../assets/company2.jpg'),
    					url:'./company/2.html',
    					summary:'公司2'
    				},
    				{
    					img:require('../../assets/company3.jpg'),
    					url:'./company/3.html',
    					summary:'公司3'
    				},
    				{
    					img:require('../../assets/company4.jpg'),
    					url:'./company/4.html',
    					summary:'公司4'
    				},
    			]
    		}    		
    	],
    	gonggao:{
    		title:'有赞公告',
    		body:[
		    		{
		    			context:'【重要公告】有赞云开发者API调用升',
		    			url:'./gonggao/1.html'
		    		},
		    		{
		    			context:'通知：App里看不到微信支付？有赞这',
		    			url:'./gonggao/2.html'
		    		},
		    		{
		    			context:'有赞分销平台业务升级：品质分销，全',
		    			url:'./gonggao/3.html'
		    		},
		    		{
		    			context:'有赞官网行业案例页面升级改版啦!',
		    			url:'./gonggao/4.html'
		    		},
		    		{
		    			context:'微商城店铺过期打烊后，扫码收款功能',
		    			url:'./gonggao/5.html'
		    		}
	    		]
    	},
    	func:{
    		title:'最新功能',
    		body:[
		    		{
		    			context:'【产品升级】来源监控-监控页面',
		    			url:'./func/1.html'
		    		},
		    		{
		    			context:'【有赞收银】v1.10.0新版发布丨',
		    			url:'./func/2.html'
		    		},
		    		{
		    			context:'有赞分销平台业务升级：品质分销',
		    			url:'./func/3.html'
		    		},
		    		{
		    			context:'【产品动态】有赞零售支持“限时”',
		    			url:'./func/4.html'
		    		},
		    		{
		    			context:'【产品公告】有赞云自用型应用升',
		    			url:'./func/5.html'
		    		}
	    		]
    	}
      }
    }
}
</script>
<style scoped>
.news_area{
	width: 24%;
	float:right;
}
.news_area .green_btn{
	width: 100%;
	height: 40px;
	background-color:#73C742;
	border: 1px solid #73C742;
	color:white;
	font:20px/36px '微软雅黑';
}
.news_area .gonggao{
	width: 100%;
	background: #fff;
}
.news_area .gonggao .title{
	width: 96%;
	padding-left: 5%;
	padding-top:10px;
	padding-bottom: 10px;
	font:bold 14px/25px '微软雅黑';
}

.news_area .gonggao .tbody ul li{
	background: url(https://bbs.youzan.com/static/image/common/dot.gif) no-repeat 0 50%;
	height: 40px;
	width: 95%;
	margin-left: 5%;
	border-bottom: 1px dashed #ccc;
}
.news_area .gonggao .tbody ul li:last-child{
	border-bottom: 0px dashed #ccc;	
}
.news_area .gonggao .tbody ul li a{


	font:12px/39px '微软雅黑';
	color:#666;
}
.news_area .billboard{
	width: 100%;
	background: #fff;
		border-bottom: 3px solid #ccc;
}
.news_area .billboard .title{
	width: 100%;
	padding-top:10px;
	padding-bottom:10px;
	font:bold 15px/20px '微软雅黑';
	border-bottom:1px solid #eee;
}
.news_area .billboard .tbody{
	width: 100%;
	border-bottom: 1px solid #ddd;
}
.news_area .billboard .bold_line {
	width: 100%;
	border-bottom: 0px solid #eee;
}
.news_area .billboard .tbody .des{
	width: 95%;
	padding-left:5%;
	height: 50px;
	font:bold 13px/50px '微软雅黑';
}
.news_area .billboard .tbody .pic{
	width: 95%;
	padding-right:5%;	
	padding-right:5%;
}
.news_area .billboard .tbody .pic .img{
	width: 21%;
	text-align: center;
	float: left;
	margin-left: 11%;
	margin-bottom:13px;
}
.news_area .billboard .tbody .pic .img a{
	font:12px/18px '微软雅黑';
	color:#666;

}
.news_area .billboard .tbody .pic .img img{
	width: 100%;
	height: 49px;
}
</style>